<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="author" content="Bootstrap-ecommerce by Vosidiy">

    <title>商品详情</title>

    <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico">

    <!-- jQuery -->
    <script src="/js/jquery-2.0.0.min.js" type="text/javascript"></script>

    <!-- Bootstrap4 files-->
    <script src="/js/bootstrap.bundle.min.js" type="text/javascript"></script>
    <link href="/css/bootstrap.css" rel="stylesheet" type="text/css"/>

    <!-- Font awesome 5 -->
    <link href="/fonts/fontawesome/css/fontawesome-all.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: fancybox  -->
    <script src="/plugins/fancybox/fancybox.min.js" type="text/javascript"></script>
    <link href="/plugins/fancybox/fancybox.min.css" type="text/css" rel="stylesheet">

    <!-- plugin: owl carousel  -->
    <link href="/plugins/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet">
    <link href="/plugins/owlcarousel/assets/owl.theme.default.css" rel="stylesheet">
    <script src="/plugins/owlcarousel/owl.carousel.min.js"></script>

    <!-- custom style -->
    <link href="/css/ui.css" rel="stylesheet" type="text/css"/>
    <link href="/css/responsive.css" rel="stylesheet" media="only screen and (max-width: 1200px)" />
	<link href="/css/footerAdjust.css" rel="stylesheet"/>

    <!-- custom javascript -->
    <script src="/js/script.js" type="text/javascript"></script>

	<script th:inline="javascript">
        $(document).ready(function(){
            var commodity = [[${commodity}]];
			$(".item-gallery").click(function () {
				var src = $(this).children("img").attr("src");
				$("#fullscreen").attr("href",src);
				$("#bigpic").attr("src",src);
            });
        });
	</script>
</head>
<body>
	<div th:replace="fragment::header"></div>

	<!-- ========================= SECTION CONTENT ========================= -->
	<section class="main-content section-content bg padding-y-sm">
		<div class="container">
		<!--<nav class="mb-3">-->
			<!--<ol class="breadcrumb">-->
				<!--<li class="breadcrumb-item"><a href="#">Home</a></li>-->
				<!--<li class="breadcrumb-item"><a href="#">Category name</a></li>-->
				<!--<li class="breadcrumb-item"><a href="#">Sub category</a></li>-->
				<!--<li class="breadcrumb-item active" aria-current="page">Items</li>-->
			<!--</ol>-->
		<!--</nav>-->

		<div class="row">
			<div class="col-xl-10 col-md-9 col-sm-12">
				<main class="card">
					<div class="row no-gutters">
						<aside class="col-sm-6 border-right">
							<article class="gallery-wrap">
								<div class="img-big-wrap">
								   <div> <div id="fullscreen" th:href="${commodity.commHeadImage}" data-fancybox><img class="img_display" id="bigpic" th:src="${commodity.commHeadImage}"></div></div>
								</div> <!-- slider-product.// -->
								<div class="img-small-wrap">
								   <div class="item-gallery img_thumbnail_1"> <img id="picture1" th:src="${commodity.commHeadImage}" ></div>
								   <div class="item-gallery img_thumbnail_2"> <img id="picture2" th:src="${commodity.commAdditionalImg1}"></div>
								   <div class="item-gallery img_thumbnail_3"> <img id="picture3" th:src="${commodity.commAdditionalImg2}"></div>
								   <!--<div class="item-gallery img_thumbnail_4"> <img src="/images/items/4.jpg"></div>-->
								</div> <!-- slider-nav.// -->
							</article> <!-- gallery-wrap .end// -->
						</aside>
						<aside class="col-sm-6">
							<article class="card-body">
							<!-- short-info-wrap -->
								<h3 class="title mb-3" th:text="${commodity.commName}">Original Version of Some product name</h3>

							<div class="mb-3">
								<var class="price h3 text-warning">
									<span class="currency">￥</span><span class="num" th:text="${commodity.commPrice}">1299</span>
								</var>
								<!--<span>/per kg</span>-->
							</div> <!-- price-detail-wrap .// -->
							<dl>
							  <dt>商品描述</dt>
							  <dd><p th:text="${commodity.commDescription}">Here goes description consectetur adipisicing elit, sed do eiusmod
							tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
							quis nostrud exercitation ullamco </p></dd>
							</dl>
							<dl class="row">
							  <dt class="col-sm-3">型号</dt>
								<!--添加th:text="${***}"-->
							  <dd class="col-sm-9" th:text="${commodity.commVersion}">12345611</dd>

							  <dt class="col-sm-3">颜色</dt>
							  <dd class="col-sm-9" th:text="${commodity.commColor}">Black and white </dd>

							  <dt class="col-sm-3">配送范围</dt>
							  <dd class="col-sm-9">中国大陆 </dd>
							</dl>
							<div class="rating-wrap">

								<ul class="rating-stars">
									<li style="width:80%" class="stars-active">
										<i class="fa fa-star"></i> <i class="fa fa-star"></i>
										<i class="fa fa-star"></i> <i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
									</li>
									<li>
										<i class="fa fa-star"></i> <i class="fa fa-star"></i>
										<i class="fa fa-star"></i> <i class="fa fa-star"></i>
										<i class="fa fa-star"></i>
									</li>
								</ul>
								<div class="label-rating">132 人好评</div>
								<div class="label-rating">154 人评价</div>
							</div> <!-- rating-wrap.// -->
							<hr>
								<div class="row">
									<div class="col-sm-5">
										<dl class="dlist-inline">
										  <dt>库存: </dt>
										  <dd>
											  <!--添加th-->
											  <label th:text="${commodity.commStock}">999</label>
										  </dd>
										</dl>  <!-- item-property .// -->
									</div> <!-- col.// -->
								</div> <!-- row.// -->
								<hr>
								<form method="post" action="/shoppingCart/add" style="display: inline">
									<input type="hidden" name="commUid" th:value="${commodity.commUid}">
									<button type="submit" class="btn  btn-warning"> <i class="fa fa-shopping-cart"></i> 加入购物车 </button>
								</form>
								<a th:href="'/orderConfirm?commUid='+${commodity.commUid}"  class="btn  btn-outline-warning" >立即购买</a>
								<!-- short-info-wrap .// -->
							</article> <!-- card-body.// -->
						</aside> <!-- col.// -->
					</div> <!-- row.// -->
				</main> <!-- card.// -->
				<!-- PRODUCT DETAIL -->
				<article class="card mt-3">
					<div class="card-body">
						<h4>详细信息</h4>
					    <p th:text="${commodity.commDetailedDescription}">

                        </p>
					</div> <!-- card-body.// -->
					<div style="display: none" >
						<div id="commheadimg" th:text="${commodity.commHeadImage}"></div>
						<div id="commaddtimg1" th:text="${commodity.commAdditionalImg1}"></div>
						<div id="commaddtimg2" th:text="${commodity.commAdditionalImg2}"></div>
					</div>
				</article> <!-- card.// -->
				<!-- PRODUCT DETAIL .// -->
			</div> <!-- col // -->
			<aside class="col-xl-2 col-md-3 col-sm-12">
				<div class="card">
					<div class="card-header">
						交易保证
					</div>
					<div class="card-body small">
						 <span>中国 | Team 3 </span>
						 <hr>
						 交易等级: 优 <br>
						 供应商评级: 最优
						 <hr>
						 11 交易 ￥330,000+
						 <hr>
						 响应时间 24h <br>
						 响应率: 94%  <br>
						 <hr>

					</div> <!-- card-body.// -->
				</div> <!-- card.// -->
				<div class="card mt-3">
					<div class="card-header">
						您可能喜欢
					</div>
					<div class="card-body row">
				<div class="col-md-12 col-sm-3">
					<figure class="item border-bottom mb-3">
							<a href="/commodity/Details/3" class="img-wrap"> <img src="/images/items/41.jpg" class="img-md"></a>
							<figcaption class="info-wrap">
								<a href="/commodity/Details/3" class="title">huawei华为honor/荣耀 荣耀20</a>
								<div class="price-wrap mb-3">
									<span class="price-new">￥4288.0</span> <del class="price-old">$280</del>
								</div> <!-- price-wrap.// -->
							</figcaption>
					</figure> <!-- card-product // -->
				</div> <!-- col.// -->
				<div class="col-md-12 col-sm-3">
				<figure class="item border-bottom mb-3">
						<a class="img-wrap" href="/commodity/Details/6"> <img src="/images/items/7.jpg" class="img-md"></a>
						<figcaption class="info-wrap">
							<a href="/commodity/Details/6"  class="title">索尼（SONY）ILCE-7M2K/B微单</a>
							<div class="price-wrap mb-3">
								<span class="price-new">￥7499.0</span>
							</div> <!-- price-wrap.// -->
						</figcaption>
				</figure> <!-- card-product // -->
				</div> <!-- col.// -->
				<div class="col-md-12 col-sm-3">
				<figure class="item border-bottom mb-3">
						<a href="/commodity/Details/15" class="img-wrap"> <img src="/images/items/36.jpg" class="img-md"></a>
						<figcaption class="info-wrap">
							<a href="/commodity/Details/15" class="title">TIFFANY&CO.蒂芙尼 女士项链</a>
							<div class="price-wrap mb-3">
								<span class="price-new">￥2399.0</span>
							</div> <!-- price-wrap.// -->
						</figcaption>
				</figure> <!-- card-product // -->
				</div> <!-- col.// -->
					</div> <!-- card-body.// -->
				</div> <!-- card.// -->
			</aside> <!-- col // -->
		</div> <!-- row.// -->
		</div><!-- container // -->
	</section>
	<!-- ========================= SECTION CONTENT .END// ========================= -->


	<div th:replace="fragment::footer"></div>


</body>
</html>

